<template>
    <div>
      <div class="nav">
        <Breadcrumb>
          <BreadcrumbItem>分析</BreadcrumbItem>
          <BreadcrumbItem>药品</BreadcrumbItem>
          <BreadcrumbItem>列表</BreadcrumbItem>
        </Breadcrumb>
  
        <div class="yab">
          <Tabs value="name1" :animated="false" style="padding: 10px">
            <TabPane label="群体" name="qt">
              <div class="info">
                <div class="box">
                  <box title="药品使用量" num="0" />
                </div>
                <div class="box">
                  <box title="药品使用频次" num="1" />
                </div>
                
              </div>
              <div class="info">
                <div class="box">
                  <refhxt title="药品品种使用频次"/>
                </div>
                <div class="box">
                  <refzzt title="药品品种使用量" />
                </div>
              </div>

            </TabPane>
            <TabPane label="个体" name="gt">
              <div class="gt">
                <div class="left">
                  <Collapse v-model="value" style="width: 220px">
                    <Panel name="1">
                      药品品种
                      <template #content> 
                        <div>发散风热药</div>
                        <div>感冒药</div>
                          </template>
                    </Panel>
                  </Collapse>
                </div>
                <div class="right">
                  <div class="info">
                    <div class="box">
                      <box title="药品使用量" num="0" />
                    </div>
                    <div class="box">
                      <box title="常用剂量" num="0" />
                    </div>
                  </div>
                  <div class="info">
                    <div class="box">
                      <refzzt title="疾病量" />
                    </div>
                    <div class="box">
                      <vxetable title="常用处方" />
                    </div>
                  </div>
                </div>
              </div>
            </TabPane>
            <template #extra>
              <DatePicker
                type="daterange"
                split-panels
                placeholder="自定义时间范围"
                style="width: 300px"
              ></DatePicker>
              <Button
                style="
                  background-color: #f0f0f0;
                  margin-left: 10px;
                  font-size: 12px;
                "
                >今天</Button
              >
              <Button
                style="
                  background-color: #f0f0f0;
                  margin-left: 10px;
                  font-size: 12px;
                "
                >昨天</Button
              >
              <Button
                style="
                  background-color: #f0f0f0;
                  margin-left: 10px;
                  font-size: 12px;
                "
                >本周</Button
              >
              <Button
                style="
                  background-color: #f0f0f0;
                  margin-left: 10px;
                  font-size: 12px;
                "
                >本月</Button
              >
              <Button
                style="
                  background-color: #f0f0f0;
                  margin-left: 10px;
                  font-size: 12px;
                "
                >本年</Button
              >
              <Button
                style="
                  background-color: #945635;
                  margin-left: 10px;
                  color: #ffffff;
                  font-size: 12px;
                "
                >自定义时间</Button
              >
            </template>
          </Tabs>
        </div>
      </div>
    </div>
  </template>
    
  <script setup>
  import box from "../../../../components/box.vue";
  import refhxt from "../../../../components/refhxt.vue"
  import refzzt from "../../../../components/refzzt.vue"
  import vxetable from "../../../../components/vxetable.vue"

  </script>
    
    <style scoped>
  .nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
  }
  .info {
    display: flex;
  }
  .box {
    height: 360px;
    background-color: #ffffff;
    flex: 1;
    margin-bottom: 20px;
    margin-right: 20px;
  }
 .gt{
  display: flex;
  
 }
 .left {
  float: left;
  background-color: #f5f7f9;
}
.right {
  width: 100%;
  padding-left:20px ;
}
  </style>